<div class="da-list-wrap">
  <div class="da-content-wrapper">
    <d-row [dGutter]="[12, 12]">
      <d-col [dSpan]="24">
        <div class="da-list-container">
          <div class="da-list-header">
            <div class="da-header-left">
              <d-row [dSpace]="15" [dAlign]="'center'" [dSpaceDirection]="'horizontal'">
                <d-col>
                  <div class="da-header-item-label">{{ 'job.job-config.type' | translate }}:</div>
                </d-col>
                <d-col>
                  <d-select name="type"
                            [allowClear]="true"
                            [filterKey]="'label'"
                            [extraConfig]="{ selectedItemWithTemplate: { enable: true } }"
                            [options]="typeList"
                            size="sm"
                            [(ngModel)]="searchFormConfig.type"
                            (valueChange)="refreshTable()"></d-select>
                </d-col>
                <d-col>
                  <div class="da-header-item-label">{{ 'flink.cluster-config.name_' | translate }}:</div>
                </d-col>
                <d-col>
                  <d-select name="flinkClusterConfig"
                            [allowClear]="true"
                            [filterKey]="'name'"
                            [extraConfig]="{ selectedItemWithTemplate: { enable: true } }"
                            [options]="flinkClusterConfigList"
                            size="sm"
                            [(ngModel)]="searchFormConfig.flinkClusterConfig"
                            (loadMore)="onFlinkClusterConfigLoadMore($event)"
                            (valueChange)="refreshTable()"></d-select>
                </d-col>
                <d-col>
                  <div class="da-header-item-label">{{ 'job.job-config.name' | translate }}:</div>
                </d-col>
                <d-col>
                  <input dTextInput name="name" [(ngModel)]="searchFormConfig.name" (keyup.enter)="refreshTable()"/>
                </d-col>
              </d-row>
            </div>
            <div class="header-right">
              <d-button style="margin-right: 8px" bsStyle="primary" (btnClick)="refreshTable()">{{
                'app.common.operate.query.label' | translate
                }}
              </d-button>
              <d-button bsStyle="common" (btnClick)="reset()">{{ 'app.common.operate.reset.label' | translate }}
              </d-button>
            </div>
          </div>
        </div>
      </d-col>
    </d-row>

    <d-row [dGutter]="[12, 12]">
      <d-col [dSpan]="24">
        <div class="da-list-container">
          <div class="da-list-header">
            <div class="header-left"></div>
            <div class="header-right">
              <d-button-group>
                <d-button
                  *ngIf="authService.hasPrivilege(PRIVILEGE_CODE.datadevProjectAdd)"
                  bsStyle="primary"
                  (btnClick)="openAddJobConfigDialog()"
                >{{ 'app.common.operate.new.label' | translate }}
                </d-button>
                <d-button
                  *ngIf="authService.hasPrivilege(PRIVILEGE_CODE.datadevProjectDelete)"
                  bsStyle="common"
                  (btnClick)="openDeleteJobConfigDialog(dataTable.getCheckedRows())"
                  [disabled]="!dataTableChecked"
                >{{ 'app.common.operate.delete.label' | translate }}
                </d-button>
              </d-button-group>
            </div>
          </div>
          <div class="list-content" id="dataTableContent">
            <d-data-table
              #dataTable
              [dataSource]="dataTableDs"
              [resizeable]="true"
              [checkable]="true"
              [tableLayout]="'fixed'"
              [scrollable]="true"
              [fixHeader]="true"
              (rowCheckChange)="getDataTableCheckedStatus()"
              (checkAllChange)="getDataTableCheckedStatus()"

            >
              <d-column field="type" header="{{ 'job.job-config.type' | translate }}">
                <d-cell>
                  <ng-template let-cellItem="cellItem">{{ cellItem?.label }}</ng-template>
                </d-cell>
              </d-column>
              <d-column field="name" header="{{ 'job.job-config.name' | translate }}">
                <d-cell>
                  <ng-template let-cellItem="cellItem">{{ cellItem }}</ng-template>
                </d-cell>
              </d-column>
              <d-column field="flinkClusterConfigId" header="{{ 'flink.cluster-instance.flinkClusterConfigId' | translate }}">
                <d-cell>
                  <ng-template let-cellItem="cellItem">{{ cellItem }}</ng-template>
                </d-cell>
              </d-column>
              <d-column field="jobConfig" header="{{ 'job.job-config.jobConfig' | translate }}">
                <d-cell>
                  <ng-template let-cellItem="cellItem">{{ cellItem }}</ng-template>
                </d-cell>
              </d-column>
              <d-column field="flinkConfig" header="{{ 'job.job-config.flinkConfig' | translate }}">
                <d-cell>
                  <ng-template let-cellItem="cellItem">{{ cellItem }}</ng-template>
                </d-cell>
              </d-column>
              <d-column field="remark" header="{{ 'flink.remark' | translate }}">
                <d-cell>
                  <ng-template let-cellItem="cellItem">{{ cellItem }}</ng-template>
                </d-cell>
              </d-column>
              <d-column field="createTime" header="{{ 'flink.createTime' | translate }}">
                <d-cell>
                  <ng-template let-cellItem="cellItem">{{ cellItem | date: 'yyyy-MM-dd HH:mm:ss' }}</ng-template>
                </d-cell>
              </d-column>
              <d-column field="updateTime" header="{{ 'flink.updateTime' | translate }}">
                <d-cell>
                  <ng-template let-cellItem="cellItem">{{ cellItem | date: 'yyyy-MM-dd HH:mm:ss' }}</ng-template>
                </d-cell>
              </d-column>
              <d-column field="actions" header="{{ 'app.common.operate.label' | translate }}">
                <d-cell>
                  <ng-template let-rowItem="rowItem" let-rowIndex="rowIndex">
                    <div class="btn-group over-flow-ellipsis">
                      <d-button
                        *ngIf="authService.hasPrivilege(PRIVILEGE_CODE.datadevProjectEdit)"
                        icon="icon-edit"
                        bsStyle="text-dark"
                        (btnClick)="openEditJobConfigDialog(rowItem)"
                        title="{{ 'app.common.operate.download.label' | translate }}"
                      ></d-button>
                      <d-button
                        *ngIf="authService.hasPrivilege(PRIVILEGE_CODE.datadevProjectDelete)"
                        icon="icon-delete"
                        bsStyle="text-dark"
                        (btnClick)="openDeleteJobConfigDialog([rowItem])"
                        title="{{ 'app.common.operate.delete.label' | translate }}"
                      ></d-button>
                    </div>
                  </ng-template>
                </d-cell>
              </d-column>
              <ng-template #noResultTemplateRef>
                <div style="text-align: center; margin-top: 20px">{{ 'app.common.noRecord' | translate }}</div>
              </ng-template>
            </d-data-table>
          </div>
          <div class="da-list-footer">
            <div class="footer-left"></div>
            <div class="footer-right">
              <d-pagination
                size=""
                [total]="pager.total"
                [(pageSize)]="pager.pageSize"
                [(pageIndex)]="pager.pageIndex"
                [canViewTotal]="true"
                [canChangePageSize]="true"
                [canJumpPage]="true"
                [maxItems]="5"
                (pageIndexChange)="refreshTable()"
                (pageSizeChange)="refreshTable()"
              >
              </d-pagination>
            </div>
          </div>
        </div>
      </d-col>
    </d-row>
  </div>
</div>
